<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: lxc
 * @Date: 2020-12-18 14:21:02
 * @LastEditors: lxc
 * @LastEditTime: 2020-12-18 17:03:22
-->
<template>
    <a-menu mode="inline"
            v-model:selectedKeys="selectedKeys"
            theme="dark">
        <a-menu-item :key="index"
                     @click="titleClick(item)"
                     v-for="(item,index) in menuData.single">
            <AreaChartOutlined v-if="index == 0" />
            <AccountBookOutlined v-if="index == 1" />
            <InsertRowAboveOutlined v-if="index == 2" />
            <AppstoreOutlined v-if="index == 3" />
            {{item.name}}</a-menu-item>
        <a-sub-menu v-show="menuData.double.length>0"
                    :key="index"
                    v-for="(item,index) in menuData.double">
            <template #title>
                <span><span>{{item.name}}</span></span>
            </template>
            <a-menu-item :key="inde"
                         v-for="(ite,inde) in item.children">{{ite.name}}</a-menu-item>

        </a-sub-menu>
    </a-menu>
</template>

<script>
import {
    AreaChartOutlined,
    AccountBookOutlined,
    InsertRowAboveOutlined,
    AppstoreOutlined
} from '@ant-design/icons-vue';
import { reactive, toRefs, watch, computed, ref, onMounted, watchEffect } from 'vue';
import * as menuData from '@/menuConfig.ts';
import { useRouter } from 'vue-router';
export default {
    components: {
        AreaChartOutlined,
        InsertRowAboveOutlined,
        AccountBookOutlined,
        AppstoreOutlined
    },
    setup() {
        const router = useRouter();
        const state = reactive({
            selectedKeys: [0],
            collapsed: false,
            menuData: menuData
        })
        const titleClick = (item) => {
            // console.log(11,val);
            router.push({
                path: item.path
            })
        }
        return {
            ...toRefs(state),
            titleClick,

        }
    },
    // render() {
    //     let menuDouble = menuData.double.map(ele => {
    //         return (
    //             (
    //                 <a-sub-menu>
    //                         <span>{ele.name}</span>
    //                     {ele.children.map(item => {
    //                         let a = (
    //                             <a-menu-item >
    //                                 {item.name}{' '}
    //                             </a-menu-item>
    //                         );
    //                         return a;
    //                     })}
    //                 </a-sub-menu>
    //             )
    //         );
    //     });

    //     let menuSingle = menuData.single.map(ele => {
    //         return (
    //             <a-menu-item index={ele.path} >
    //                 {ele.name}
    //             </a-menu-item>
    //         )
    //     });
    //     return (
    //         <a-menu theme="dark"
    //             inline-collapsed="false"
    //             mode="inline"
    //         >
    //             {menuSingle}
    //             {menuDouble}
    //         </a-menu >
    //     );
    // }
}

</script>
